<template>
    <div class="center-layout">
        <div class="center-layout-top">
            <div class="center-layout-top-item" v-for="(v, k) in state.module1" :key="k"
                :style="{ left: v.left + 'vw', top: v.top + 'vw' }">
                <div class="center-layout-top-item-text">{{ v.text }}</div>
                <div class="center-layout-top-item-icon">
                    <img src="@/images/index/item1.png" alt="">
                </div>
            </div>
        </div>
        <div class="center-layout-center">
            <div class="center-layout-center-item" v-for="(v, k) in state.module2" :key="k"
                :style="{ left: v.left + 'vw', top: v.top + 'vw' }">


            </div>
        </div>
        <div class="center-layout-bottom">
            <div class="center-layout-bottom-item" v-for="(v, k) in state.module3" :key="k"
                :style="{ left: v.left + 'vw', top: v.top + 'vw' }">
                <div class="center-layout-bottom-item-top">
                    <img :src="v.icon" alt="">
                </div>
                <div class="center-layout-bottom-item-bottom">
                    <div class="center-layout-bottom-item-bottom-title">{{ v.title }}</div>
                    <div class="center-layout-bottom-item-bottom-num">
                        <AnimateNumber :value="v.num"></AnimateNumber>
                    </div>
                </div>
            </div>
        </div>
        <div class="center-center-bottom">
            <img src="@/images/index/first-floot-cloud.png" alt="">
        </div>
        <div class="center-top">
            <div class="center-top-first">
                <img src="@/images/index/top.png" alt="">
            </div>
            <div class="center-top-second">
                <img src="@/images/index/top-floor.png" alt="">
            </div>
        </div>
        <div class="center-center">
            <div class="center-center-floor">
                <img src="@/images/index/second-floor.png" alt="">
            </div>
            <div class="center-center-animate">
                <div class="center-center-animate-base">
                    <div class="center-center-animate-base-list u_p3d"
                        :style="'transform:rotateX(70deg) rotateY(0deg) rotateZ(' + state.deg + 'deg)'">
                        <div class="center-center-animate-base-list-item u_p3d" v-for="(v, k) in state.module2" :key="k"
                            :style="animateIndex(state.module2.length, k)">
                            <div class="center-center-animate-base-list-item-content" :style="'transform: rotateY(' +
                                (state.deg - (360 / state.module2.length) * k) +
                                'deg)'
                                ">
                                <div class="center-center-animate-base-list-item-content-top">
                                    <div class="center-center-animate-base-list-item-content-top-title">{{ v.title }}</div>
                                    <div class="center-center-animate-base-list-item-content-top-num1">数据种类：<AnimateNumber
                                            :value="v.num1"></AnimateNumber>
                                    </div>
                                    <div class="center-center-animate-base-list-item-content-top-num2">数据条数：<AnimateNumber
                                            :value="v.num2"></AnimateNumber>
                                    </div>
                                </div>
                                <div class="center-center-animate-base-list-item-content-bottom">
                                    <img :src="v.icon" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="center-bottom-earch">
            <img src="@/images/index/earth.png" alt="">
        </div>
        <div class="center-rain">
            <div class="center-rain-item" v-for="(v, k) in state.rains" :key="k"
                :style="{ animationDuration: `${v.time}s`, position: 'absolute', left: v.x + '%' }"></div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, reactive } from "vue";
import item2 from '@/images/index/item2.png'
import item3 from '@/images/index/item3.png'
import item4 from '@/images/index/item4.png'
import item5 from '@/images/index/item5.png'
import bt1 from '@/images/index/bt1.png'
import bt2 from '@/images/index/bt2.png'
import bt3 from '@/images/index/bt3.png'
import bt4 from '@/images/index/bt4.png'
import bt5 from '@/images/index/bt5.png'
import bt6 from '@/images/index/bt6.png'
import AnimateNumber from '@/components/number/index.vue'
const state: any = reactive({
    module1: [
        { text: '智能对比', left: '5', top: '2' },
        { text: '关系分析', left: '1', top: '6' },
        { text: '聚类分析', left: '3', top: '10' },
        { text: '语言分析', left: '28', top: '2' },
        { text: '数据检索', left: '32', top: '6' },
        { text: '拓补分析', left: '31', top: '10' },
    ],
    module2: [
        { icon: item2, title: '三维仿真场景', num1: '322', num2: '23641', left: '2', top: '4' },
        { icon: item3, title: '实时监控', num1: '652', num2: '24411', left: '9', top: '10' },
        { icon: item4, title: '农业传感', num1: '6521', num2: '62481', left: '20', top: '10' },
        { icon: item5, title: '网络监测', num1: '7541', num2: '8541', left: '30', top: '4' },
        { icon: item5, title: '数据统计', num1: '56741', num2: '3246', left: '30', top: '4' },
        { icon: item5, title: '历史记录', num1: '94121', num2: '48412', left: '30', top: '4' },
    ],
    module3: [
        { icon: bt1, title: '数据库表', num: '322', left: '0', top: '3' },
        { icon: bt2, title: '单元个数', num: '1222', left: '3.5', top: '6' },
        { icon: bt3, title: '监控数量', num: '3212', left: '8', top: '8' },
        { icon: bt4, title: '观察单元', num: '44', left: '34', top: '3' },
        { icon: bt5, title: '卫星守卫', num: '51', left: '30.5', top: '6' },
        { icon: bt6, title: '系统单元', num: '112', left: '26', top: '8' },
    ],
    timer: null,
    deg: 0,
    rains: []
})
onMounted(() => {
    runAnimate()
    createRains()
    changeNumber()
})
const changeNumber = () => {
    setInterval(() => {
        for (let x of state.module2) {
            x.num1 = Number(x.num1) + Math.floor(Math.random() * 10)
            x.num2 = Number(x.num2) + Math.floor(Math.random() * 100)
        }
        for (let x of state.module3) {
            x.num = Number(x.num) + Math.floor(Math.random() * 10)
        }
    }, 2000)
}
const createRains = () => {
    state.rains = Array.from({ length: 200 }, (v, k) => {
        const x = Math.random() * 100
        const y = 1200
        const time = Math.random() * 10
        const width = Math.random() * 50 + 20
        const height = Math.random() * 2 + 2
        const duration = (Math.random() * 5 + 3).toFixed(3) + 's'
        return { x, y, duration, time, width, height }
    })
}
const runAnimate = () => {
    if (state.timer) {
        clearInterval(state.timer)
    }
    state.timer = setInterval(() => {
        state.deg += 1
    }, 100)
}
const animateIndex = (total, index) => {
    let zIndex = 9
    let color = '#FFF'
    const deg = (360 / total) * index
    if (deg >= 0 && deg <= 180) {
        zIndex = 3
    }
    return `transform: rotateX(-90deg) rotateY(${deg}deg) translate(-50%,-50%);
      color:${color};z-index:${zIndex}`
}
</script>
<style lang="less" scoped>
.center-layout {
    position: absolute;
    width: 720px;
    left: 600px;
    height: 100%;
    // border: 1px solid;

    &-top {
        position: absolute;
        top: 150px;
        // border: 1px solid;
        width: 100%;
        left: 0;


        &-item {
            text-align: center;
            position: absolute;
            // animation: it;
            animation: item1 5s infinite;

            &-text {
                font-size: 18px;
                margin-bottom: 10px;
                font-family: Adobe Heiti Std;
                font-weight: normal;
                color: #01F9F0;
            }

            &-icon {
                img {
                    width: 58px;
                    object-fit: cover;
                }
            }

            // &:nth-child(4n) {
            //     animation: item2 5s infinite;
            // }
        }
    }

    &-center {
        position: absolute;
        width: 740px;
        top: 400px;
        left: 0;

        // border: 1px solid ;
        &-item {
            position: absolute;
            text-align: center;


        }
    }

    &-bottom {
        position: absolute;
        top: 730px;
        left: 0;
        width: 100%;
        z-index: 10;

        // border: 1px solid;
        &-item {
            position: absolute;
            text-align: center;

            &-top {
                img {
                    width: 38px;
                    object-fit: cover;
                }
            }

            animation: item1 4s infinite;

            &-bottom {
                text-align: left;
                font-size: 12px;
                font-weight: bold;
                line-height: 1;

                &-title {
                    color: #00F7FF;
                }

                &-num {
                    color: #EEF100;
                    margin-top: 4px;
                    text-align: center;
                }
            }
        }
    }
}

.center-bottom-earch {
    position: absolute;
    bottom: -100px;
    left: -200px;
    z-index: 1;

    img {
        width: 1100px;
        object-fit: cover;
    }
}

.center-center-bottom {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;

    img {
        width: 200px;
        object-fit: cover;
    }
}

.center-top {
    &-first {
        position: absolute;
        top: 150px;
        left: 50%;
        transform: translate(-50%);
        z-index: 100;
        animation: top 5s infinite;

        img {
            width: 200px;
            object-fit: cover;
        }
    }

    &-second {
        position: absolute;
        top: 200px;
        left: 50%;
        transform: translate(-50%);
        z-index: 99;

        img {
            width: 400px;
            object-fit: cover;
        }
    }
}

.center-center {
    &-floor {
        position: absolute;
        left: 50%;
        top: 400px;
        transform: translateX(-50%);

        img {
            width: 700px;
            object-fit: cover;
        }
    }

    &-animate {
        position: absolute;
        width: 500px;
        height: 500px;
        left: 50%;
        top: 59%;
        transform: translate(-50%, -50%);
        z-index: 1;

        &-base {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 1;
            transform: translate(-50%, -50%);

            &-list {
                -webkit-transform: rotateX(80deg) rotateY(0deg);
                transform: rotateX(80deg) rotateY(0deg);
                position: relative;
                width: 500px;
                height: 500px;
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
                transition: all 0.1s linear;

                &-item {
                    transform-origin: 270px 10px;
                    position: absolute;
                    top: 50%;
                    left: 0%;
                    width: 100px;
                    height: 450px;
                    cursor: pointer;
                    color: #fff;
                    font-size: 26px;

                    &-content {
                        &-top {
                            width: 140px;
                            height: 82px;
                            background: url(@/images/index/bg2.png) no-repeat;
                            background-size: 100% 100%;
                            text-align: left;
                            padding: 6px;

                            margin-bottom: 12px;

                            &-title {
                                font-size: 14px;
                                font-weight: normal;
                                color: #7CE3FD;
                            }

                            &-num1 {
                                font-size: 9px;
                                font-weight: bold;
                                color: #7CE3FD;
                            }

                            &-num2 {
                                font-size: 9px;
                                font-weight: bold;
                                color: #EFED00;
                            }
                        }

                        &-bottom {
                            img {
                                width: 80px;
                                object-fit: cover;
                            }
                        }
                    }
                }
            }
        }
    }
}

.u_p3d {
    -webkit-transform-style: preserve-3d !important;
    transform-style: preserve-3d !important;
}

.center-rain {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;

    &-item {
        width: 2px;
        height: 20px;
        background: linear-gradient(to bottom, #00f9fd7d, #00f9fd00);
        animation-name: rain;
        animation-iteration-count: infinite;
        animation-timing-function: linear
    }

    ;
}

@keyframes top {
    0% {
        top: 130px;
    }

    50% {
        top: 100px;
    }

    100% {
        top: 130px;
    }
}

@keyframes item1 {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-30%);
    }

    100% {
        transform: translateY(0%);
    }
}

@keyframes item2 {
    0% {
        transform: translateY(-30%);
    }

    50% {
        transform: translateY(00%);
    }

    100% {
        transform: translateY(-30%);
    }
}

@keyframes rain {
    0% {
        bottom: 0;
    }

    100% {
        bottom: 100%
    }
}</style>